<template>
  <div>
    <van-field v-model="tel" placeholder="请输入手机号" />
    <van-button @click="step()" :disabled="flag" round class="btn" block color="#ff6666">下一步</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Button, Dialog } from 'vant'
import { docheckphone } from './../../api/user'
Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
export default {
  data () {
    return {
      tel: '1881300781'
    }
  },
  computed: {
    flag () {
      return !/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.tel)
    }
  },
  methods: {
    step () {
      // 验证手机号是不是被注册，如果没有被注册，提示用户将会发送短信
      // 如果注册过，提示用户已有该用户，是否直接登录
      docheckphone({ tel: this.tel }).then(res => {
        if (res.data.code === '10005') {
          Dialog.confirm({
            message: '该手机号已被注册，是否直接登录'
          })
            .then(() => {
              // on confirm
              this.$router.push('/login') // ? replace
            })
            .catch(() => {
              // on cancel
            })
        } else {
          Dialog.confirm({
            message: '我们将发送短信验证码至<br />' + this.tel + ',请注意查收'
          })
            .then(() => {
              // on confirm
              // 保存手机号到本地，第二步时取出来使用
              localStorage.setItem('tel', this.tel)
              this.$router.push('/register/step2')
            })
            .catch(() => {
              // on cancel
            })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  padding 30px 20px
  .btn
    margin-top 40px
</style>
